<template>
  <div class="allotApp-publicStyle">
    <h3 class="title">{{ $t("module.dataPermission.assignDimension") }}</h3>
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="allotAppSearchForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <!-- 搜索编码和名称 -->
        <Form-item prop="nameOrCode">
          <Input
            type="text"
            :maxlength="30"
            v-model.trim="searchForm.nameOrCode"
            :placeholder="$t('module.dataPermission.warning.enterAppCodeOrAppName')"
            @on-enter="search"
          ></Input>
        </Form-item>
        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">
          <RPButton optType="search" @click="search" />
          <RPButton optType="reset" @click="reset" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <!-- 表格 -->
    <InnerPageTable ref="dimensionTable" :config="tableConfig"></InnerPageTable>
  </div>
</template>

<script>
import dataPermissionAPI from "@/api/dataPermissionAPI.js";
import { dimensionColumns } from "./columns.js";
import locales from "./locales.js";

export default {
  name: "rule-assign-dimension",
  mixins: [locales],
  props: {
    tenantCode: { type: String, required: true },
    permissionRule: {
      type: Object,
      default() {
        return null;
      }
    },
    ruleCode: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      dimension: [],
      searchForm: {
        tenantCode: this.tenantCode,
        policyCode: this.ruleCode,
        nameOrCode: "" // 搜索
      },
      allSelection: [],
      // 保存初始数据
      initData: {
        dimensionList: []
      },
      // 标识当前是否是搜索查询
      isSearch: ""
    };
  },
  computed: {
    tableConfig() {
      return {
        resource: this.dimension,
        // loadDataFn: this.queryDimensionList,
        // initParam: this.searchForm,
        columnsFn: dimensionColumns.bind(this),
        autoFirst: true,
        isPage: false,
        hasSelectionArea: false,
        selectionAreaItem: { key: "dimensionCode", title: "dimensionCode" },
        allSelection: this.allSelection,
        onSelectionChange: this.selectionChange,
        rowClassNameFn: this.rowClassName // 自定义行样式
      };
    }
  },
  mounted() {},
  created() {
    this.init();
    // 获取表格列表数据
    this.search();
  },
  methods: {
    // 自定义行样式
    rowClassName(row) {
      //enabled:0-有效，1-无效;isAllot:0-未选中，1-选中
      if (row.enabled == 0 && row.isAllot == 1) {
        return "tableDisableStyle";
      }
    },
    init() {
      if (this.permissionRule) {
        // console.log(this.permissionRule.dimensionCodeList);
        this.allSelection = this.permissionRule.dimensionCodeList.map(dimensionCode => {
          return { dimensionCode };
        });
      }
    },
    // 获取维度列表数据
    search() {
      dataPermissionAPI.queryDimensionList(this.searchForm).then(data => {
        // let { records } = data;
        // records.forEach(dimension => {
        //   // 标记已选中项
        //   dimension._checked = dimension.isAllot == 1;
        // });
        // 保存初始数据
        this.initData.dimensionList = data;
        // 数据虽有返回_checked，但却获取不到值，因此做以下处理，以供排序通过_checked判断是否是已选数据
        // let { records } = data;
        if (this.permissionRule && data) {
          for (let i = 0; i < data.length; i++) {
            let item = data[i];
            if (this.permissionRule.dimensionCodeList.indexOf(item.dimensionCode) !== -1) {
              item._checked = true;
              continue;
            }
          }
        }
        // 排序：将已选应用排于未选应用前
        this.dimension = this.$root.$options.filters["sort-checkedAppFirst"](data);
        // 标识当前是否是搜索查询
        this.isSearch = this.searchForm.nameOrCode ? "search" : "";
      });
    },
    // 获取维度列表数据
    // queryDimensionList({ responseProcess ,params}) {
    //   dataPermissionAPI.queryDimensionList(params).then(data => {
    //     // let { records } = data;
    //     // records.forEach(dimension => {
    //     //   // 标记已选中项
    //     //   dimension._checked = dimension.isAllot == 1;
    //     // });
    //     // 保存初始数据
    //     this.initData.dimensionList = data.records;
    //     // 数据虽有返回_checked，但却获取不到值，因此做以下处理，以供排序通过_checked判断是否是已选数据
    //     let { records } = data;
    //     if (records && records.length) {
    //       for (let i = 0; i < records.length; i++) {
    //         let item = records[i];
    //         if (this.permissionRule.dimensionCodeList.indexOf(item.dimensionCode) !== -1) {
    //           item._checked = true;
    //           continue;
    //         }
    //       }
    //     }
    //     // 排序：将已选应用排于未选应用前
    //     data.records = this.$root.$options.filters["sort-checkedAppFirst"](records);
    //     responseProcess(data);
    //   });
    // },
    // 搜索
    // search(page = 1) {
    //   let searchParams = Object.assign({}, this.searchForm);
    //   this.$refs["dimensionTable"].load(searchParams, page);
    // },
    // 重置
    reset() {
      this.$refs["allotAppSearchForm"].resetFields();
      this.search();
    },
    selectionChange(data) {
      // this.$emit("change", this.$refs["dimensionTable"].allSelection, this.initData.dimensionList);
      this.$emit("change", this.$refs["dimensionTable"].selection, this.initData.dimensionList, this.isSearch);
    }
  }
};
</script>
